import React, { useEffect } from 'react'
import './App.css'
import GameScene from './components/GameScene'
import GameStarter from './components/GameStarter'
import useGameStore from './context/gameStore'

const App = () => {
  const gameStatus = useGameStore(state => state.gameStatus)
  
  // 添加一个样式以根据游戏状态更改背景
  useEffect(() => {
    document.body.className = gameStatus
  }, [gameStatus])
  
  return (
    <div className="app">
      {/* 游戏场景 (3D) */}
      <div className="game-container">
        <GameScene />
      </div>
      
      {/* 游戏UI层 */}
      <div className="ui-container">
        <GameStarter />
      </div>
    </div>
  )
}

export default App
